<template>
  <div class="xh_detail">
    <div class="xh_dialog" v-if="glData.length>0">
       <div class="xh_div_left"  v-for="(item, i) in glData" :key=i>
         <p class="title">广告系列</p>
         <p class="name">{{item.campaign_name}}</p>
         <p class="money">广告系列ID
            <span style="margin-right:-5px;margin-left:2px;color:#39444E;">{{item.campaign_id}}</span>
          </p>
          <p class="name"></p>
       </div>
       <div class="xh_div_right"  v-for="(item, i) in glData" :key=i>
         <p class="title">消耗进度</p>
         <div :class="item.rate>80?'xh_divder_top':'xh_divder_top_lower'"></div>
         <p style="display:flex">
           <span class="name">{{item.rate}}%</span>
           <el-progress :percentage="item.rate" :show-text="false" :class="item.rate > 80?'process_up':'process_down'" stroke-width="8" style="width: 240px;margin-top:20px;margin-left: 10px;"></el-progress>
          </p>
         <div :class="item.rate>80?'xh_divder_bottom':'xh_divder_bottom_lower'"></div>
         <p class="money">
           已消耗
           <span style="margin-right:-5px;margin-left:2px;color:#39444E;">{{isSymol}}</span>
            <countTo :start-val="0" :decimals="2" :end-val="Number(item.consumption)" :duration="1" style="margin-right:20px;margin-left:2px;color:#39444E;" class="num"></countTo>
           余额
            <span style="margin-right:-5px;margin-left:2px;color:#39444E;">{{isSymol}}</span>
           <countTo :start-val="0" :decimals="2" :end-val="Number(item.orderBalance)" :duration="1" style="margin-right:20px;margin-left:2px;color:#39444E;" class="num"></countTo>
          </p>
       </div>
     </div>
     <div class="xh_divider_bottom"></div>
     <div class="xh_qs">
        <div class="xh_echart_chooseTime">
          <cell-header :title="'消耗趋势'" style="padding-bottom: 24px" />
          <div class="chooseTime"><chooseTime @timeChange="timeChangeDetail"></chooseTime></div>
        </div>
        <div class="xh_echart" v-if="!time">
          <xhDetails v-if="qsXData.length> 0" :isSymol="isSymol" :qsXData="qsXData" :qsYData="qsYData"></xhDetails>
          <div v-else class="no_data">暂无数据</div>
        </div>
        <div class="xh_echart" v-else>
          <xhDetailList v-if="qsXDataList.length > 0" :isSymol="isSymol" :qsXData="qsXDataList" :qsYData="qsYDataList"></xhDetailList>
          <div v-else class="no_data">暂无数据</div>
        </div>
     </div>
     <div class="xh_divider_bottom"></div>
     <div class="xh_qs" style="margin-bottom: 20px">
        <cell-header :title="'消耗记录'" style="padding-bottom: 24px" />
        <el-table :data="xhDataDetail" :header-cell-class-name="headerStyle">
          <el-table-column label="时间" prop="createtime"></el-table-column>
          <el-table-column label="消耗金额" align="right">
            <template slot-scope="scope">
               <span>{{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.consumption)" :duration="1" class="num"></countTo></span>
            </template>
          </el-table-column>
          <el-table-column label="税费" align="right">
            <template slot-scope="scope" align="right">
               <span>{{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.expenses)" :duration="1" class="num"></countTo></span>
            </template>
          </el-table-column>
          <el-table-column label="服务费" align="right">
            <template slot-scope="scope" align="right">
               <span>{{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.servicecharge)" :duration="1" class="num"></countTo></span>
            </template>
          </el-table-column>
          <el-table-column label="广告系列余额" align="right">
            <template slot-scope="scope">
               <span>{{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.orderBalance)" :duration="1" class="num"></countTo></span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="totalDetail"
          @pageSize="changePageSizeDetail"
          @page="changePageDetail"
          :page="pageDetail"
          :pageSize="pageSizeDetail"
        ></pagination>
     </div>
  </div>
</template>

<script>
import pagination from '@/components/elementComponents/pagination.vue'
import countTo from 'vue-count-to'
import cellHeader from '@/components/cell-header.vue'
import { findUserUfconsume, generalView, campaignTotal} from "@/api/finace.js";
import chooseTime from '../ad/overview/components/chooseTime/index'
import xhDetails from '@/components/charts/xhDetails.vue'
import xhDetailList from '@/components/charts/xhDetailList.vue'
export default {
  components: {
    pagination,
    cellHeader,
    chooseTime,
    xhDetails,
    countTo,
    xhDetailList
  },
  props: {
    id: Number,
    time: Array,
    value: String,
    page: Number,
    size: Number
  },
  data() {
    return {
      totalDetail: 0,
      pageSizeDetail: 10,
      pageDetail: 1,
      timeDetail: '',
      glData: '',
      id: '',
      qsXData: [],
      qsYData: [],
      qsXDataList: [],
      qsYDataList: []
    }
  },
  mounted() {
    this.getGLData()
  },
   computed: {
    teamId() {
      return this.$store.state.team.teamId
    },
    type() {
      return this.$store.state.user.unit;
    },
    isSymol() {
      return this.$store.state.user.unit === 'USD' ? '$' : '￥'
    }
  },
  watch: {
    id: {
      handler:function(newV) {
        this.id = newV
        this.getGLData()
      }
    },
    pageDetail(newV,oldV){
      this.pageDetail = newV
      this.getFindUserUfconsume()
    },
    pageSizeDetail(newV,oldV){
      this.pageSizeDetail = newV
      this.getFindUserUfconsume()
    },
    type: {
      handler: function(newV, oldV) {
        this.getGLData()
        return newV
      }
    },
    timeDetail: {
       handler: function(newV, oldV) {
        this.timeDetail = newV
        this.getCampaignTotal()
      }
    },
    time(newV) {
      this.getGLData()
      this.getCampaignTotal()
      return newV
    },
    teamId: {
      deep: true,
      handler: function(newV, oldV) {
        this.teamId = newV
        this.getGLData()
      }
    }
  },
  methods:{
     headerStyle({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (columnIndex > 1) {
        return 'right-align'
      }
    },
    timeChangeDetail(data) {
      this.timeDetail = data
    },
    changePageSizeDetail(data) {
      this.pageSizeDetail = data
    },
    changePageDetail(data) {
      this.pageDetail = data
    },
    async getGLData() {
      this.getFindUserUfconsume()
      this.getCampaignTotal()
      let params = {
        type: this.type,
        campaign_id: this.id,
        teamId: this.teamId
      }
      const result = await generalView(params)
      if (result.data.code === 20000)
      {
          result.data.data.list.forEach(item => {
          if (item.campaign_name.indexOf('_3YData_') !== -1) {
              let str = item.campaign_name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              item.campaign_name = str.substring(gang).substring(1,str.length)
            }
        })
        this.glData = result.data.data.list
      } else return this.$message.error(res.data.message)
    },
    async getFindUserUfconsume() {
      let data = {
          page: this.pageDetail,
          size: this.pageSizeDetail,
          type: this.type,
          search: this.value,
          startTime:  '',
          endTime: '',
          campaign_id: this.id,
          teamId: this.teamId,
          sort: 'DESC'
      }
      const res = await findUserUfconsume(data)
      if (res.data.code === 20000) {
        this.xhDataDetail = res.data.data.list;
        this.totalDetail = res.data.data.total;
        this.$forceUpdate()
      } else return false
    },
    async getCampaignTotal() {
      let data = {
        type: this.type,
        startTime: this.timeDetail[0],
        endTime: this.timeDetail[1],
        campaign_id: this.id,
        teamId: this.teamId
      }
      const res = await campaignTotal(data)
        if (res.data.code === 20000) {
          let value = res.data.data
          this.qsXData = []
          this.qsYData = []
          let qsXData = []
          let  qsYData = []
          let qsXDataList = []
          let qsYDataList = []
          for(let k in value) {
            let data = value[k]
            qsXData.push(k)
            qsXDataList.push(k)
            qsYDataList.push(data)
            qsYData.push(data)
        }
        this.qsXData = qsXData
        this.qsYData = qsYData
        this.qsXDataList = qsXDataList
        this.qsYDataList = qsYDataList
      }
    },
  }
}
</script>

<style scoped lang="scss" scoped>
div.process_up /deep/.el-progress-bar__inner{
  background: linear-gradient(270deg, #F4C277 0%, #FFE5BD 100%) !important;
}
div.process_down /deep/.el-progress-bar__inner{
  background: linear-gradient(270deg, #29E3C3 0%, rgba(104, 203, 186, 0.2) 100%);;
}
// 消耗css
.xh_dialog{
  display: flex;
  flex-direction: row;
  .title {
      font-size: 14px;
      line-height: 14px;
      color: rgba(51, 64, 74, 0.8);
    }
    .name {
      color: #39444E;
      font-weight: 500;
      font-size: 20px;
      line-height: 20px;
      margin-top: 15px;
    }
    .money {
    font-size: 12px;
    line-height: 14px;
    color: #ACB6C2;
    margin-top: 10px;
    }
  .xh_div_left{
    width: 40%;
    font-family: PingFang SC !important;
    font-style: normal;
    font-weight: normal;
  }
   .xh_div_right{
    width: 60%;
    font-family: PingFang SC !important;
    font-style: normal;
    font-weight: normal;
    .xh_divder_top {
      border-right: 1px solid #F4C277;
      height: 5px;
      width: 1px;
      position: absolute;
      margin-left: 242px;
      margin-top: 15px;
    }
    .xh_divder_top_lower {
      border-right: 1px solid #68CBBA;
      height: 5px;
      width: 1px;
      position: absolute;
      margin-left: 242px;
      margin-top: 15px;
    }
    .xh_divder_bottom{
      border-right: 1px solid #F4C277;
      height: 5px;
      width: 1px;
      position: absolute;
      margin-left: 242px;
      margin-top: -6px;
    }
    .xh_divder_bottom_lower{
      border-right: 1px solid #68CBBA;
      height: 5px;
      width: 1px;
      position: absolute;
      margin-left: 242px;
      margin-top: -6px;
    }
  }
}
.xh_divider_bottom {
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(57, 68, 78, 0.1);
    margin-top: 20px;
  }
  .xh_qs {
    width: 100%;
    margin-top: 40px;
    font-family: PingFang SC !important;
    font-style: normal;
    .xh_echart_chooseTime {
      display: flex;
      flex-direction: row;
      .chooseTime {
        height: 40px;
        position: absolute;
        right: 0;
        margin-right: 20px;
        margin-top: -5px;

      }
    }
  }
  .xh_echart {
    width: 100%;
  }
  .no_data {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
  }
</style>
